<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript" src="/js/vue.js"></script>
<title>Vue.js</title>
</head>
<body>
	<h1>VBIND指令</h1>
	<hr></hr>
	<div id="app">
		<p>
			<img alt="暂时无法加载" v-bind:src="imgSrc"  width="200px"></img>
			<img alt="暂时无法加载" src="http://pic1a.nipic.com/2009-01-07/20091713417344_2.jpg"  width="200px"></img>
		</p>
		<p>
			<a :href="webUrl" target="_blank">务工之家</a>
		</p>
		<hr></hr>
		<div :class="className">1 绑定Class</div>
		<div :class="{classA:isOk}">1 绑定Class中的判断</div>
		<div :class="[classA,classB]">1 绑定Class中的判断数组形式</div>
		<div :class="isOk?classA:classB">1 绑定Class中的判断三元运算符</div>
		<hr></hr>
		<div>
			<input type="checkbox" id="isOk" v-model="isOk"></input>
			<label for="isOk">isOk={{isOk}}</label>
		</div>
		<hr></hr>
		<div :style="{color:red,fontSize:font}">绑定Style</div>
		<div :style="styleObject">对象绑定Style</div>
	</div>
	
	<style>
		.classA{
			color:red;
			
		}
		.classA{
			font-size:150%;	
		}
	</style>
	
	<script type="text/javascript">
		var app = new Vue({
			
			el:'#app',
			data:{
				meassage:'hello world',
				imgSrc:'http://pic1a.nipic.com/2009-01-07/20091713417344_2.jpg',
				webUrl:'www.wugongzhijia.com',
				className:'classA',
				isOk:false,
				classA:'classA',
				classB:'classB',
				red:'red',
				font:'15px',
				styleObject:{
					color:'blue',
					fontSize:'30px'
				}
				
			}		
		});
	</script>
</body>
</html>